<template>
	<view @click="blur">
		<view class="fixed-top">
			<div class="tab-nav uni-flex">
				<div class="tab-item" @click="groupTypeChange(1)" :class="groupType==1?'active-item':''">企业彩铃</div>
				<div class="tab-item" @click="groupTypeChange(2)" :class="groupType==2?'active-item':''">视频彩铃</div>
			</div>
			<div class="search-para uni-flex justify-between">
				<view class="input-wrap uni-inline-item">
					<input type="text" @click.stop :value="searchData.allName" @input="keywordInput" @focus.stop="querySearchKeyList" class="keyword-input">
					<view class="submit-btn" @click="search">查询</view>
				</view>
				<navigator url="/pages/addgroup/addgroup" class="add-group uni-inline-item justify-center"><uni-icons type="plusempty" color="#5374F7" size="14"></uni-icons>新建集团</navigator>
			</div>
		</view>
		<view class="layer" v-if="showSearchKeyRecord">
			<div class="search-key-wrap" @click.stop>
				<view class="search-key-title">历史搜索：</view>
				<view class="clear">
					<view class="no-history" v-if="!searchKeyList.length">暂无记录</view>
					<view class="search-key-item" :key="item.searchkeyUid" @click="selectSearchKey(item.keyname)" v-for="(item,index) in searchKeyList">{{item.keyname}}</view>
				</view>
			</div>
		</view>
		<view class="group-list">
			<view class="group-item" :key="index" v-for="(item,index) in list">
				<view class="group-content">
					<view class="group-name">{{item.name||item.ADMIN_NAME}}</view>
					<view class="group-info uni-flex">
						<view class="group-info-item">
							<text class="group-info-title">成员数：</text>
							<text class="group-info-content">{{(item.opennum!==undefined?item.opennum:item.MEMBER_OPEN)+'/'+(item.allnum||item.MEMBER_ALL)}}</text>
						</view>
						<view class="group-info-item">
							<text class="group-info-title">提交时间：</text>
							<text class="group-info-content">{{item.createtime}}</text>
						</view>
					</view>
				</view>
				<div class="group-btns uni-flex">
					<navigator class="group-btn" :url="'/pages/groupdetail/groupdetail?circleid='+(item.QWVEDIO_CIRCLE_UID||item.CIRCLE_ID)+'&&index=0&&grouptype='+groupType" hover-class="none">集团详情</navigator>
					<navigator class="group-btn" :url="'/pages/groupdetail/groupdetail?circleid='+(item.QWVEDIO_CIRCLE_UID||item.CIRCLE_ID)+'&&index=1&&grouptype='+groupType" hover-class="none">铃音管理</navigator>
					<navigator class="group-btn" :url="'/pages/groupdetail/groupdetail?circleid='+(item.CIRCLE_ID||item.QWVEDIO_CIRCLE_UID)+'&&index=2&&grouptype='+groupType" hover-class="none">成员管理</navigator>
				</div>
			</view>
		</view>
		<p class="tip-text" v-if="loading||searchData.pagenow==totalPage">{{loading?'正在加载中…':'没有更多了…'}}</p>
		<p class="tip-text" v-if="!loading&&totalPage==0">暂无数据</p>
		<tab-bar :tabIndex="1"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupType:1,
				totalPage:0,
				loading:false,
				showSearchKeyRecord:false,
				searchData:{
					allName:'',
					shownum:10,
					pagenow:1,
				},
				searchKeyList:[],
				list:[],
			}
		},
		mounted(){
			this.getCircleList()
		},
		methods: {
			blur(){
				console.log(555)
				this.showSearchKeyRecord=false
			},
			keywordInput(event){
				this.searchData.allName=event.detail.value
			},
			groupTypeChange(index){
				if(this.groupType!=index){
					this.searchData.allName=''
					this.groupType=index
					this.search()
				}
			},
			selectSearchKey(key){
				this.showSearchKeyRecord=false
				this.searchData.allName=key
				this.search()
			},
			onReachBottom(){
				if(this.searchData.pagenow<this.totalPage){
					this.searchData.pagenow++
					this.getCircleList()
				}else{
					return
				}
			},
			search(){
				this.searchData.pagenow=1
				this.list=[]
				this.totalPage=0
				this.getCircleList()
			},
			getCircleList(){
				console.log(this.searchData)
				this.loading=true
				if(this.searchData.allName){
					this.saveSearchKey()
				}
				this.$request[this.groupType==1?'queryCircleList':'queryQWVedioCircleList'](this.searchData)
				.then(res=>{
					if(res.code==0){
						var list=res.objlist||[]
						list.forEach(item=>{
							item.createtime=new Date(item.createtime||item.INPUT_TIME).Format('yyyy-MM-dd')
						})
						this.list=this.list.concat(list)
						this.totalPage=res.pagenum
					}
					this.loading=false
				})
			},
			querySearchKeyList(){
				this.$request.querySearchKeyList({
					circletype:1,
					pagenow:1,
					shownum:10,
				},this.groupType).then(res=>{
					if(res.code==0){
						this.searchKeyList=res.objlist
						this.showSearchKeyRecord=true
					}
				})
			},
			saveSearchKey(){
				this.$request.saveSearchKey({
					keyname:this.searchData.allName,
					circletype:1,
				},this.groupType)
			}
		}
	}
</script>
	
<style lang="scss">
	page{
		padding-bottom: 98rpx;
	}
	.fixed-top{
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 8;
		box-shadow: 0 0 10rpx rgba(0,0,0,.2);
	}
	.tab-nav{
		height: 90rpx;
		padding: 0 30rpx;
		width: 100%;
		background-color: #fff;
		.tab-item{
			flex-grow:1;
			height: 100%;
			line-height: 90rpx;
			text-align: center;
			color: #666;
			font-size: 30rpx;
			position: relative;
		}
		.active-item{
			color: #333;
			&:after{
				content: '';
				width: 80rpx;
				height: 6rpx;
				background: rgb(83, 116, 247);
				position: absolute;
				left: 0;
				right: 0;
				bottom: 11rpx;
				margin: 0 auto;
			}
		}
	}
	.search-para{
		padding: 14rpx 30rpx;
		background-color: #F5F5F5;
		.input-wrap{
			width: 490rpx;
			height: 60rpx;
			background: #fff;
			border-radius: 30rpx;
			padding: 0 5rpx;
			.keyword-input{
				height: 100%;
				flex-grow: 1;
				font-size: 26rpx;
				padding-left: 26rpx;
			}
			.submit-btn{
				width: 100rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				color: #fff;
				font-size: 26rpx;
				background: rgb(83, 116, 247);
				border-radius: 30rpx;
			}
		}
		.add-group{
			width: 170rpx;
			height: 60rpx;
			background: #fff;
			border-radius: 30rpx;
			text-align: center;
			line-break: 60rpx;
			color: #5374F7;
			font-size: 28rpx;
			.uniui-plusempty{
				font-weight: bold;
				margin-right: 6rpx;
				flex-grow: 0;
				margin-left: 0;
			}
		}
	}
	.layer{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 7;
		background-color: rgba(0,0,0,.5);
		left:0;
		top:0;
		.search-key-wrap{
			width: 690rpx;
			min-height: 212rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			position: absolute;
			top: 197rpx;
			left: 30rpx;
			padding: 0 30rpx 6rpx;
			.search-key-title{
				line-height: 78rpx;
				height: 78rpx;
				color: #666666;
				font-size: 24rpx;
			}
			.no-history{
				color: #333;
				font-size: 24rpx;
				line-height: 40rpx;
				float: left;
			}
			.search-key-item{
				min-width: 60rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #fff;
				border-radius: 20rpx;
				float: left;
				margin-right: 30rpx;
				margin-bottom: 24rpx;
				padding: 0 22rpx;
				color: #333;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
	.group-list{
		padding: 187rpx 30rpx 0;
		.group-item{
			width: 690rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			&:last-of-type{
				margin-bottom: 0;
			}
			.group-content{
				padding: 23rpx 30rpx;
				.group-name{
					color: #333;
					font-size: 28rpx;
					font-weight: bold;
					height: 40rpx;
					line-height: 40rpx;
					margin-bottom: 17rpx;
				}
				.group-info{
					.group-info-item{
						width: 50%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						.group-info-title{
							color: #333;
						}
						.group-info-content{
							color: #666;
						}
					}
				}
			}
			.group-btns{
				border-top: 1PX solid #ddd;
				.group-btn{
					width: 30%;
					flex: 1;
					text-align: center;
					height: 70rpx;
					line-height: 70rpx;
					color: #5374F7;
					font-size: 26rpx;
					border-right: 1PX solid #DDDDDD;
					&:last-child{
						border-right: 0;
					}
				}
			}
		}
	}
	.tip-text{
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		color: #999;
		font-size: 22rpx;
	}
</style>
